<template>
    <div class="dimension-detail">
        <!-- 头部 -->
        <div class="detail-header">
            <div class="ability-info">
                <h2>{{ ability.ability_name }}</h2>
                <div class="ability-score">
                    <span class="score-number">{{ ability.current_level }}</span>
                    <span class="score-max">/10</span>
                </div>
            </div>
            <div class="ability-level">
                <span :class="getLevelClass(ability.current_level)">
                    {{ getAbilityLevel(ability.current_level) }}
                </span>
            </div>
        </div>

        <!-- 进度条 -->
        <div class="progress-section">
            <van-progress :percentage="(ability.current_level / 10) * 100" stroke-width="8"
                :color="getProgressColor(ability.current_level)" track-color="#f5f5f5" />
            <div class="progress-labels">
                <span>初级</span>
                <span>中级</span>
                <span>高级</span>
                <span>专家</span>
            </div>
        </div>

        <!-- 能力描述 -->
        <div class="description-section">
            <h3>能力说明</h3>
            <p>{{ getAbilityDescription(ability.ability_type) }}</p>
        </div>

        <!-- 当前表现 -->
        <div class="performance-section">
            <h3>当前表现</h3>
            <div class="performance-content">
                <div class="strengths">
                    <h4>
                        <van-icon name="like-o" color="#07c160" />
                        优势表现
                    </h4>
                    <ul>
                        <li v-for="strength in getStrengths(ability)" :key="strength">
                            {{ strength }}
                        </li>
                    </ul>
                </div>
                <div class="improvements">
                    <h4>
                        <van-icon name="warning-o" color="#ffd21e" />
                        改进空间
                    </h4>
                    <ul>
                        <li v-for="improvement in getImprovements(ability)" :key="improvement">
                            {{ improvement }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 提升建议 -->
        <div class="suggestions-section">
            <h3>提升建议</h3>
            <div class="suggestion-cards">
                <div v-for="(suggestion, index) in getSuggestions(ability)" :key="index" class="suggestion-card">
                    <div class="suggestion-icon">
                        <van-icon :name="suggestion.icon" />
                    </div>
                    <div class="suggestion-content">
                        <h4>{{ suggestion.title }}</h4>
                        <p>{{ suggestion.description }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 相关训练 -->
        <div class="training-section">
            <h3>推荐训练</h3>
            <div class="training-list">
                <div v-for="training in relatedTrainings" :key="training.id" class="training-item"
                    @click="startTraining(training)">
                    <div class="training-info">
                        <h4>{{ training.title }}</h4>
                        <p>{{ training.description }}</p>
                        <div class="training-meta">
                            <van-tag size="small" :type="getDifficultyType(training.difficulty)">
                                {{ training.difficulty }}
                            </van-tag>
                            <span class="duration">{{ training.duration }}</span>
                        </div>
                    </div>
                    <van-icon name="arrow" />
                </div>
            </div>
        </div>

        <!-- 历史趋势 -->
        <div class="history-section">
            <h3>能力趋势</h3>
            <div class="trend-chart">
                <!-- 这里可以添加折线图显示能力变化趋势 -->
                <div class="trend-placeholder">
                    <van-icon name="chart-trending-o" size="48" color="#ddd" />
                    <p>暂无历史数据</p>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
            <van-button type="primary" size="large" block @click="startTargetedTraining">
                开始针对性训练
            </van-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { trainingApi, type UserAbility, type TrainingScenario } from '@/api'

interface Props {
    ability: UserAbility
}

interface Emits {
    (e: 'close'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const router = useRouter()

// 响应式数据
const relatedTrainings = ref<TrainingScenario[]>([])

// 方法
const getAbilityLevel = (level: number) => {
    if (level >= 8) return '专家级'
    if (level >= 6) return '高级'
    if (level >= 4) return '中级'
    return '初级'
}

const getLevelClass = (level: number) => {
    if (level >= 8) return 'level-expert'
    if (level >= 6) return 'level-advanced'
    if (level >= 4) return 'level-intermediate'
    return 'level-beginner'
}

const getProgressColor = (level: number) => {
    if (level >= 8) return '#07c160'
    if (level >= 6) return '#1989fa'
    if (level >= 4) return '#ffd21e'
    return '#ff976a'
}

const getAbilityDescription = (abilityType: string) => {
    const descriptions: Record<string, string> = {
        'communication': '沟通表达能力是指清晰、准确地传达自己的想法，并能够理解他人表达的能力。包括语言表达、非语言沟通、倾听技巧等方面。',
        'empathy': '共情理解能力是指能够理解和感受他人情感，站在他人角度思考问题的能力。这是建立良好人际关系的基础。',
        'conflict_resolution': '冲突处理能力是指在面对分歧和冲突时，能够冷静分析、寻找解决方案，化解矛盾的能力。',
        'leadership': '领导力是指影响和激励他人，带领团队实现目标的能力。包括决策能力、团队管理、激励他人等方面。',
        'teamwork': '团队协作能力是指与他人有效合作，共同完成任务的能力。包括协调配合、资源共享、集体决策等。',
        'emotional_intelligence': '情商是指识别、理解和管理自己及他人情绪的能力。高情商有助于建立更好的人际关系。',
        'social_awareness': '社交意识是指对社交环境和他人需求的敏感度，能够适当调整自己的行为以适应不同的社交场合。',
        'adaptability': '适应性是指面对变化和新环境时，能够快速调整自己的思维和行为方式的能力。'
    }
    return descriptions[abilityType] || '这是一项重要的社交能力，对个人发展和人际关系都有重要影响。'
}

const getStrengths = (ability: UserAbility) => {
    const level = ability.current_level
    const strengthsMap: Record<string, string[]> = {
        'communication': [
            level >= 6 ? '表达清晰，逻辑性强' : '基本能够表达自己的想法',
            level >= 7 ? '善于倾听，能够理解他人' : '愿意倾听他人意见',
            level >= 8 ? '能够适应不同的沟通场合' : '在熟悉环境中沟通较好'
        ],
        'empathy': [
            level >= 6 ? '能够感受他人情绪变化' : '对他人情绪有一定感知',
            level >= 7 ? '善于站在他人角度思考' : '尝试理解他人观点',
            level >= 8 ? '能够给予他人情感支持' : '关心他人感受'
        ]
    }

    const defaultStrengths = [
        level >= 5 ? '在该能力方面有一定基础' : '具备基本的能力素养',
        level >= 6 ? '在某些情况下表现良好' : '愿意学习和改进',
        level >= 7 ? '能够应对常见场景' : '有提升的潜力'
    ]

    return strengthsMap[ability.ability_type!] || defaultStrengths
}

const getImprovements = (ability: UserAbility) => {
    const level = ability.current_level
    const improvementsMap: Record<string, string[]> = {
        'communication': [
            level < 6 ? '表达时缺乏条理性' : '在复杂话题上表达可以更清晰',
            level < 7 ? '倾听技巧需要提升' : '可以更好地理解言外之意',
            level < 8 ? '在陌生环境中沟通较困难' : '可以进一步提升说服力'
        ],
        'empathy': [
            level < 6 ? '对他人情绪感知不够敏感' : '可以更深入地理解他人感受',
            level < 7 ? '较少从他人角度考虑问题' : '在复杂情况下共情能力可以加强',
            level < 8 ? '情感支持技巧需要提升' : '可以更好地帮助他人处理情绪'
        ]
    }

    const defaultImprovements = [
        level < 5 ? '基础技能需要加强' : '在挑战性场景中表现可以提升',
        level < 6 ? '缺乏系统性的方法' : '可以学习更多实用技巧',
        level < 7 ? '实践经验相对不足' : '可以在更多场景中练习'
    ]

    return improvementsMap[ability.ability_type!] || defaultImprovements
}

const getSuggestions = (ability: UserAbility) => {
    // const level = ability.current_level
    const suggestionsMap: Record<string, any[]> = {
        'communication': [
            {
                icon: 'chat-o',
                title: '练习结构化表达',
                description: '使用"总-分-总"的结构来组织语言，让表达更有逻辑性。'
            },
            {
                icon: 'ear',
                title: '提升倾听技巧',
                description: '练习主动倾听，通过复述和提问来确认理解。'
            },
            {
                icon: 'friends-o',
                title: '多场景练习',
                description: '在不同的社交场合练习沟通，提升适应性。'
            }
        ],
        'empathy': [
            {
                icon: 'smile-o',
                title: '观察情绪信号',
                description: '学会观察他人的面部表情、语调和肢体语言。'
            },
            {
                icon: 'exchange',
                title: '换位思考练习',
                description: '在日常交往中有意识地从他人角度思考问题。'
            },
            {
                icon: 'like-o',
                title: '情感回应技巧',
                description: '学习如何恰当地回应他人的情感需求。'
            }
        ]
    }

    const defaultSuggestions = [
        {
            icon: 'star-o',
            title: '基础技能训练',
            description: '通过系统性的练习来提升基础能力。'
        },
        {
            icon: 'play-circle-o',
            title: '情景模拟练习',
            description: '在安全的环境中练习各种社交场景。'
        },
        {
            icon: 'medal-o',
            title: '持续改进',
            description: '定期反思和总结，不断优化自己的表现。'
        }
    ]

    return suggestionsMap[ability.ability_type!] || defaultSuggestions
}

const getDifficultyType = (difficulty: string) => {
    const typeMap: Record<string, string> = {
        '初级': 'success',
        '中级': 'warning',
        '高级': 'danger'
    }
    return typeMap[difficulty] || 'default'
}

const loadRelatedTrainings = async () => {
    try {
        const response = await trainingApi.getTrainingsByAbility(props.ability.ability_type!)
        relatedTrainings.value = response.data.slice(0, 3) // 只显示前3个
    } catch (error) {
        console.error('加载相关训练失败:', error)
    }
}

const startTraining = (training: TrainingScenario) => {
    emit('close')
    router.push({
        name: 'TrainingSession',
        params: { scenarioId: training.id }
    })
}

const startTargetedTraining = () => {
    emit('close')
    router.push({
        name: 'TrainingPage',
        query: { ability: props.ability.ability_type }
    })
}

// 生命周期
onMounted(() => {
    loadRelatedTrainings()
})
</script>

<style lang="scss" scoped>
.dimension-detail {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;

    .detail-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 24px;

        .ability-info {
            flex: 1;

            h2 {
                font-size: 24px;
                color: #323233;
                margin: 0 0 8px 0;
                font-weight: 600;
            }

            .ability-score {
                .score-number {
                    font-size: 32px;
                    color: #1989fa;
                    font-weight: bold;
                }

                .score-max {
                    font-size: 18px;
                    color: #969799;
                }
            }
        }

        .ability-level {
            span {
                padding: 6px 12px;
                border-radius: 16px;
                font-size: 14px;
                font-weight: 500;

                &.level-expert {
                    background: #f0f9ff;
                    color: #07c160;
                }

                &.level-advanced {
                    background: #f0f8ff;
                    color: #1989fa;
                }

                &.level-intermediate {
                    background: #fffbf0;
                    color: #ffd21e;
                }

                &.level-beginner {
                    background: #fff7f0;
                    color: #ff976a;
                }
            }
        }
    }

    .progress-section {
        margin-bottom: 32px;

        .progress-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
            font-size: 12px;
            color: #969799;
        }
    }

    .description-section,
    .performance-section,
    .suggestions-section,
    .training-section,
    .history-section {
        margin-bottom: 32px;

        h3 {
            font-size: 18px;
            color: #323233;
            margin: 0 0 16px 0;
            font-weight: 600;
        }

        p {
            font-size: 14px;
            color: #646566;
            line-height: 1.6;
            margin: 0;
        }
    }

    .performance-content {

        .strengths,
        .improvements {
            margin-bottom: 20px;

            &:last-child {
                margin-bottom: 0;
            }

            h4 {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 16px;
                color: #323233;
                margin: 0 0 12px 0;
                font-weight: 500;
            }

            ul {
                margin: 0;
                padding-left: 20px;

                li {
                    font-size: 14px;
                    color: #646566;
                    line-height: 1.6;
                    margin-bottom: 8px;

                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }
    }

    .suggestion-cards {
        .suggestion-card {
            display: flex;
            gap: 12px;
            padding: 16px;
            background: #f7f8fa;
            border-radius: 8px;
            margin-bottom: 12px;

            &:last-child {
                margin-bottom: 0;
            }

            .suggestion-icon {
                width: 40px;
                height: 40px;
                background: white;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;

                .van-icon {
                    color: #1989fa;
                    font-size: 18px;
                }
            }

            .suggestion-content {
                flex: 1;

                h4 {
                    font-size: 16px;
                    color: #323233;
                    margin: 0 0 8px 0;
                    font-weight: 500;
                }

                p {
                    font-size: 14px;
                    color: #646566;
                    line-height: 1.5;
                    margin: 0;
                }
            }
        }
    }

    .training-list {
        .training-item {
            display: flex;
            align-items: center;
            padding: 16px;
            background: #f7f8fa;
            border-radius: 8px;
            margin-bottom: 12px;
            cursor: pointer;

            &:last-child {
                margin-bottom: 0;
            }

            &:active {
                background: #ebedf0;
            }

            .training-info {
                flex: 1;

                h4 {
                    font-size: 16px;
                    color: #323233;
                    margin: 0 0 8px 0;
                    font-weight: 500;
                }

                p {
                    font-size: 14px;
                    color: #646566;
                    line-height: 1.5;
                    margin: 0 0 8px 0;
                }

                .training-meta {
                    display: flex;
                    align-items: center;
                    gap: 12px;

                    .duration {
                        font-size: 12px;
                        color: #969799;
                    }
                }
            }
        }
    }

    .history-section {
        .trend-chart {
            .trend-placeholder {
                text-align: center;
                padding: 40px 20px;
                color: #969799;

                p {
                    margin: 12px 0 0 0;
                    font-size: 14px;
                }
            }
        }
    }

    .action-buttons {
        padding-top: 20px;
        border-top: 1px solid #ebedf0;
    }
}
</style>